import QtQuick 2.15
import QtQuick.Controls 2.15
import "../component"

ApplicationWindow {
    id: root

    height: 340
    width: 600
	visible: true
	property variant easings : ["Linear", "InQuad", "OutQuad", "InOutQuad",
		"InCubic", "InSine", "InCirc", "InElastic",
		"InBack", "InBounce"]
	color:'#56d5aa'
	Grid{
		id:container
		anchors.top:parent.top
		anchors.horizontalCenter:parent.horizontalCenter
		anchors.topMargin:16
		height:200
		columns:5
		spacing:16
		// iterates over the 'easings' list

		Repeater{
			model:easings
			ClickableImage2{
				framed:true
				text: modelData
				source: '/resources/curves/' + modelData + '.png'
				onClicked:{
					anim.easing.type = modelData
					anim.start()
				}
			}
		}
	}
	
	
	// The square to be animated
	GreenSquare {
		id: square
		x: 40; y: 260
	}
	
	// The animation to test the easing types
	NumberAnimation{
		id : anim
		target:square
		// from:40 可以不写 from
 		to: root.width - 40 - square.width
		properties: 'x'
		duration: 2000
		loops: Animation.Infinite // 设置动画循环
	}
	
}